<template>
  <el-container>
    <Navigation></Navigation>
    <HeaderBar></HeaderBar>
    <div class="main-box">
      <div class="main-left">
        <el-menu :default-active="this.$route.path" background-color="#545c64" text-color="#fff"
                 active-text-color="#fff" router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span>申报系统</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="myApply">待审批列表</el-menu-item>
              <el-menu-item index="HasCheckList">已审核列表</el-menu-item>
              <el-menu-item index="RejectList">驳回列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span>签约系统</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="needSigned">待签约项目</el-menu-item>
              <el-menu-item index="hasSignedCheckList">已签约项目</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span>还款系统</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="HasPayment">已发放金额</el-menu-item>
              <el-menu-item index="NeedToPayment">待发放项目</el-menu-item>
              <el-menu-item index="NeedDue">待还款项目</el-menu-item>
              <el-menu-item index="finishProject">已完成项目</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="main-right">
        <router-view></router-view>
      </div>
    </div>

    <el-footer>
      <FooterBar></FooterBar>
    </el-footer>
  </el-container>
</template>

<script>
import HeaderBar from "@/components/FrontComponents/HeaderBar";
import Navigation from "@/components/FrontComponents/Navigation";
import FooterBar from "@/components/FrontComponents/FooterBar";

export default {
  name: "MyData",
  components: {HeaderBar, Navigation, FooterBar}
}
</script>

<style scoped>
.main-box {
  width: 1500px;
  margin-left: 200px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  background-color: #fffefd;
}

.main-left {
  width: 255px;
}

.main-right {
  width: 985px;
  margin-left: 0px;
  background-color: #f5f5f5;
}

.el-menu {
  height: 800px;
  width: 250px;
}

.el-menu .el-menu-item {
  padding-left: 30px;
}

.el-menu .el-menu-item .el-icon-caret-right {
  margin-top: 20px;
  float: right;
}
</style>